<!--
 * @Author: Orangepi - xcy2001@sina.cn
 * @Date: 2022-01-01 00:46:31
 * @LastEditTime: 2022-01-02 02:23:44
 * @LastEditors: Orangepi - xcy2001@sina.cn
 * @Description:
 * @FilePath: \college-application-enrollment-web\cae-web\src\views\Home.vue
-->
<template>
  <div class="home">
    <div class="title">
      首 页<button @click="showLogin = true">切换后台</button>
    </div>
    <el-dialog
      title="身份验证"
      :visible.sync="showLogin"
      :modal-append-to-body="false"
    >
      <div class="login-form">
        <p>管理员账号</p>
        <el-input
          v-model="user.userName"
          placeholder="请输入管理员账号"
          class="dialog-input"
        />
        <p>管理员密码</p>
        <el-input
          v-model="user.userPsdInput"
          placeholder="请输入管理员密码"
          class="dialog-input"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="showLogin = false">取 消</el-button>
          <el-button type="primary" @click="goToAdmin">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <dv-loading>Loading...</dv-loading> -->
    <dv-border-box-8><home-main /></dv-border-box-8>
  </div>
</template>

<script>
// @ is an alias to /src
import { loginHttp } from "../network/user.http";
import HomeMain from "../components/home/HomeMain";
export default {
  name: "Home",
  components: {
    HomeMain,
  },
  data() {
    return {
      showLogin: false,
      user: {
        userName: "",
        userPsdInput: "",
      },
    };
  },
  methods: {
    async goToAdmin() {
      const { userName, userPsdInput } = this.user;

      let res = await loginHttp({ userName, userPsd: userPsdInput }).catch(
        (err) => {
          return { unsucess: true, err };
        }
      );
      if (res.unsucess) {
        this.$message({
          type: "error",
          message: res.err,
        });
        return;
      }
      console.log(res);
      if (res.status === 200) {
        this.$message({
          type: "info",
          message: "登录成功",
        });
        localStorage.jwt=res.jwt;

        this.$router.push('/admin')
      }else{
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
      this.showLogin = false;
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  text-align: center;
  font-size: 30px;
  color: #f3f3f38e;
  button {
    position: absolute;
    top: 0px;
    right: 20vw;
    background-color: rgba(0, 0, 0, 0);
    padding: 10px;
    font-size: 15px;
    border: 1px solid #f3f3f38e;
    border-radius: 10px;
    cursor: pointer;
  }
  button:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}
.home {
  width: 100%;
  height: 100%;
  padding: 30px;
  padding-top: 50px;
  box-sizing: border-box;
  .login-form {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    p {
      margin-bottom: 10px;
      font-size: 20px;
    }
    .dialog-input {
      display: inline-block;
      width: 350px;
      margin-bottom: 10px;
    }
  }
}
</style>
